<template>
  <div class="my_container" style="height: calc(100% - 53px)">
    <van-form ref="formRef" class="r_form" :model="place" @submit="submit">
      <div class="r_input">
        <van-cell-group>
          <van-field label="库位代号" v-model="place.PlaceCode" :rules="[{ required: true, message: '请输入编码' }]" />
          <van-field label="库位名称" v-model="place.PlaceName" :rules="[{ required: true, message: '请输入名称' }]" />
          <!--<van-field label="库位组" v-model="place.PlaceGroup" :rules="[{ required: true, message: '请输入组号' }]" />-->
        </van-cell-group>
      </div>
      <div class="r_button">
        <van-button size="large" type="primary" native-type="submit">保存</van-button>
      </div>
    </van-form>
    <van-overlay :show="loading">
      <div class="loading_wrapper"><van-loading type="spinner" size="24" /></div>
    </van-overlay>
  </div>
</template>
<script lang="ts" setup>
import { savePlace } from '@/api/place';
import type { PlaceModel } from '@/model/placemodel';
import router from '@/router';
import { showSuccessToast } from 'vant';
import { ref } from 'vue';
import { error, success } from '@/utils/navigatorUtil';

const loading = ref(false);
const place = ref<PlaceModel>({});
const init_val = () => {
  place.value = {};
};
const to_place = () => {
  router.back();
};
const submit = () => {
  loading.value = true;
  savePlace(place.value)
    .then((r) => {
      init_val();
      showSuccessToast('操作成功');
      success();
      loading.value = false;
      to_place();
    })
    .catch((e) => {
      error();
      loading.value = false;
    });
};
</script>
<style scoped>
.r_form {
  height: 100%;
  width: 100%;
}
.r_input {
  width: 100%;
  height: calc(100% - 48px - 10px);
}
.r_button {
  margin-top: 10px;
  width: 100%;
}
</style>
